<template>
	<view>
		<view class="topnav">
			<uni-nav-bar :fixed="true" :title="item.title" leftIcon="left" @clickLeft="clickLeft"></uni-nav-bar>
		</view>
		<view class="contentBox">
			<view class="content">
				<view class="uni-padding-wrap uni-common-mt">
					<view>
						<video id="myVideo"
							:src="item.chapterPath"
							@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
					</view>
					<!-- #ifndef MP-ALIPAY -->
					<view class="uni-list uni-common-mt">
						<view class="uni-list-cell">
							<view>
								<view class="uni-label">弹幕内容</view>
							</view>
							<view class="uni-list-cell-db">
								<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
							</view>
						</view>
					</view>
					<view class="uni-btn-v">
						<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
					</view>
					<!-- #endif -->
				</view>
			</view>
			<view class="next">
				<view class="">
					<text>上一页</text>
				</view>
				<view class="">
					<text> 下一页</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item:{},
				 src: '',
				danmuList: [{
						text: '第 1s 出现的弹幕',
						color: '#ff0000',
						time: 1
					},
					{
						text: '第 3s 出现的弹幕',
						color: '#ff00ff',
						time: 3
					}
				],
				danmuValue: ''
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		onLoad(option) {
			this.item = JSON.parse(option.item)
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			sendDanmu: function() {
				this.videoContext.sendDanmu({
					text: this.danmuValue,
					color: this.getRandomColor()
				});
				this.danmuValue = '';
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			}
		}
	}
</script>

<style scoped lang="scss">
	uni-video{
		width: 750rpx;
	}
	.contentBox {
		padding-bottom: 50px;
	}

	.setting {
		height: 200rpx;
		background-color: aliceblue;
		font-size: 40rpx;
	}

	.next {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.next>view {
		padding: 5rpx 10px;
	}
</style>
